<template>
  <div class="position-full over-auto" :style="{...styles.bStyles,...styles.backgroundStyles}">
    <div v-for="(camera, index) in widget.UI.data.cameras" :key="index">
      <div class="position-absolute"
           :style="{ 'left': camera.position.left + 'px', 'top': camera.position.top + 'px',...styles.textStyles}">
       <pre class="font-size-16"> {{
           camera.name
         }}<i class="el-icon-camera-solid"></i>
      </pre>
      </div>
      <div v-for="(mic, index) in camera.mics" :key="index">
        <div class="flex-justify-around mic-box position-absolute"
             :style="{ 'width': mic.position.width + 'px','height': mic.position.height + 'px','left': mic.position.left + 'px',
             'top': mic.position.top + 'px' ,'backgroundColor':formatColor(camera.micColor,activeTheme),...styles.contentStyles}">
          <pre class="font-size-16">{{mic.name}}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {formatColor} from '@/utils';
  import {mapState} from 'vuex';
  import {assetBaseUrl} from '@/config/env';

  export default {
    name: 'CameraTracking',
    props: {
      widget: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        formatColor: formatColor
      };
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      styles() {
        const {
          backgroundColor = '',
          componentColor = '',
          textColor = '',
          contentColor = '',
          backgroundImage = ''
        } = this.widget.UI.data;
        const bStyles = {}
        const backgroundStyles = {};
        const componentStyles = {};
        const textStyles = {};
        const contentStyles = {};
        if (backgroundImage) {
          bStyles.backgroundImage = `url(${assetBaseUrl}/file/download/${backgroundImage})`;
          bStyles.backgroundSize = 'cover';
          bStyles.backgroundPosition = 'center';
          bStyles.backgroundRepeat = 'no-repeat';
        }
        backgroundColor && (backgroundStyles.backgroundColor = formatColor(backgroundColor, this.activeTheme));
        componentColor && (componentStyles.backgroundColor = formatColor(componentColor, this.activeTheme));
        textColor && (textStyles.color = formatColor(textColor, this.activeTheme));
        contentColor && (contentStyles.color = formatColor(contentColor, this.activeTheme));
        return {
          bStyles: bStyles,
          backgroundStyles: backgroundStyles,
          componentStyles: componentStyles,
          textStyles: textStyles,
          contentStyles: contentStyles,
        }
      },

    },
  };
</script>

<style scoped lang="less">
  .mic-box {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background: #f00;
    color: #fff;
  }

  .over-auto {
    overflow: auto;
  }
</style>
